import React from "react";
import { InputItem, Button, Flex, WhiteSpace } from "antd-mobile";
import { useState } from "react";

export default () => {
    // 定义组件内的状态
    const [mobile, setMobile] = useState("");
    const [code, setCode] = useState("");

    const canSend = mobile && /^1[3579]\d{9}$/.test(mobile);

    // 定义获取验证码处理事件
    const onSendCodeClicked = () => {
        // ...
    };

    return (
        <div className="login">
            <h1 style={{ textAlign: "center", marginTop: "130px" }}>
                手机号登录
            </h1>

            <InputItem
                placeholder="请输入手机号"
                value={mobile}
                onChange={(v) => setMobile(v)}
            />

            <WhiteSpace size="lg" />

            <Flex justify="between">
                <InputItem
                    placeholder="请输入验证码"
                    value={code}
                    onChange={(v) => setCode(v)}
                />

                <Button
                    type="ghost"
                    style={{ padding: "0 10px" }}
                    onClick={onSendCodeClicked}
                    disabled={!canSend}
                >
                    获取验证码
                </Button>
            </Flex>

            <WhiteSpace size="lg" />

            <Button>登录</Button>
        </div>
    );
};
